<style>
/* .searchpage > .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab-disabled {
	color: blue;
} */
</style>


<template>
<div>
	<div class="full-background" bg-gray5 pd5>
		<div bd-gray4 bd-circle style="max-width:500px;" bg-white>
			<Input v-model=search search size="large" placeholder="输入关键字搜索" @on-search=handleGotoSearch nobd pdx2 />
		</div>
	</div>

	<Tabs v-model="tag">
        <TabPane label="搜索结果" disabled></TabPane>
        <TabPane name="notice" :label="`通知资讯(${noticePage.totalCount})`">
			<div v-for="(item, index) in noticePage.items" :key="index" pd2 bdb-gray4>
				<p sz1 mgt2 ellipsis long>
					<router-link :to="{ name: 'article-detail', params: { id: item.id, systemType: 1 } }" gray2 linkable v-html="formatStrWithSearch(item.title)" :title=item.title></router-link>
				</p>
				<p gray3 mgt2>{{formatTimeStr(item.creationTime, 'YYYY-MM-DD')}}</p>
				<p gray3 mgt2 v-html="formatStrWithSearch(ellipsis(item.description, 50))"></p>
			</div>
			
			<div v-if="noticePage.totalCount==0" text-center style="margin:15vh 0;" gray3>
				<p><img src="../../images/no-search-data.png" alt=""></p>
				<p mgt2 sz1>抱歉，没有找到与“<span red>{{search}}</span>”相关信息</p>
			</div>

			<div mgt2>
				<auto-page v-if="noticePage.totalCount" :value="noticePage" :auto=false right></auto-page>
			</div>
		</TabPane>
        <TabPane name="classroom" :label="`微课堂(${classroomPage.totalCount})`">
			<div v-for="(item, index) in classroomPage.items" :key="index" pd2 bdb-gray4>
				<p sz1 mgt2>
					<router-link :to="{ name: 'article-detail', params: { id: item.id, systemType: 2 } }" v-html="formatStrWithSearch(item.title)"></router-link>
				</p>
				<p gray3 mgt2>{{formatTimeStr(item.creationTime, 'YYYY-MM-DD')}}</p>
				<p gray3 mgt2 v-html="formatStrWithSearch(ellipsis(item.description, 50))"></p>
			</div>
			
			<div v-if="classroomPage.totalCount==0" text-center style="margin:15vh 0;" gray3>
				<p><img src="../../images/no-search-data.png" alt=""></p>
				<p mgt2 sz1>抱歉，没有找到与“<span red>{{search}}</span>”相关信息</p>
			</div>

			<div mgt2>
				<auto-page v-if="classroomPage.totalCount" :value="classroomPage" :auto=false right></auto-page>
			</div>
		</TabPane>
        <TabPane name="commodity" :label="`商品(${commodityPage.totalCount})`">
			<Row :gutter="10">
				<Col v-for="(commodity, index) in commodityPage.items" :xs="{ span: 12, offset: 0 }" :sm="{ span: 12, offset: 0 }" :md="{ span: 6, offset: 0 }" :key="index" mgt2>
					<router-link :to="{name:'commodity-detail', params: {id:commodity.commodityId}}">
						<Card text-center style="height:290px;" pdy3 :padding=0 :bordered="false">
							<background-image long style="height:180px;max-width:200px;" :value=commodity.picture></background-image>
							<p mgt2 sz1 ellipsis long pdx1 :title="commodity.commodityName" v-html="formatStrWithSearch(commodity.commodityName)"></p>
							<p mgt2>
								<span sz1 blue>￥{{formatPrice(commodity.price)}}</span>
								<s pdx1 sz0 gray3>￥{{formatPrice(commodity.originalPrice)}}</s>
							</p>
						</Card>
					</router-link>
				</Col>
			</Row>

			<div v-if="commodityPage.totalCount==0" text-center style="margin:15vh 0;" gray3>
				<p><img src="../../images/no-search-data.png" alt=""></p>
				<p mgt2 sz1>抱歉，没有找到与“<span red>{{search}}</span>”相关商品</p>
			</div>

			<div mgt2>
				<auto-page v-if="commodityPage.totalCount" :value="commodityPage" :auto=false right></auto-page>
			</div>
		</TabPane>
    </Tabs>
</div>
</template>

<script lang="ts">
import { Component, Vue,Inject, Prop,Watch } from 'vue-property-decorator';
import AbpBase from '../../lib/abpbase'
import AutoPage from '@common/components/AutoPage'
import Page from '@common/models/Page'
import BackgroundImage from '@common/components/background-image'

@Component({
	components: {
		AutoPage, BackgroundImage
	}
})
export default class SearchResult extends AbpBase{
	tag:string = "notice";
	search:string = "";
	noticePage:Page = new Page('/api/services/app/Article/SearchEnabled', { systemType: 1, search: this.search, searchTarget: 'title'  });
	classroomPage:Page = new Page('/api/services/app/Article/SearchEnabled', { systemType: 2, search: this.search, searchTarget: 'title' });
	commodityPage:Page = new Page('/api/services/app/Commodity/SearchShelved', { search: this.search, searchTarget: 'name' });
	get items() {
		return [
			{ id: 1 }
		]
	}
	formatStrWithSearch(str) {
		if(!str) return str;
		return str.replace(this.search, `<span red>${this.search}</span>`);
	}
	getData() {
		var search = this.$route.query.search;
		if(search) {
			this.search = search;
		}
		this.noticePage.action_data.search = this.search;
		this.classroomPage.action_data.search = this.search;
		this.commodityPage.action_data.search = this.search;
		this.noticePage.getData(() => {
			if(this.noticePage.totalCount > 0) this.tag = 'notice';
		});
		this.classroomPage.getData(() => {
			if(this.classroomPage.totalCount > 0) this.tag = 'classroom';
		});
		this.commodityPage.getData(() => {
			if(this.commodityPage.totalCount > 0) this.tag = 'commodity';
		});
	}
	handleGotoSearch() {
		this.$router.push({
			name: 'search-result',
			query: {
				search: this.search
			}
		});
	}
	created() {
		this.getData();
	}
	@Watch('$route')
	handleOnSearchChange() {
		this.getData();
	}
}
</script>
